<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BookDatabase</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
		function start(){
		    var aa=document.getElementById('id')
			alert(aa)
		}

    </script>
</head>
<body>
<div style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-pills nav-stacked">
            <li class="current" id="玄幻奇幻"><a href="#" onclick="start()">玄幻奇幻</a></li>
            <li id="武侠仙侠"><a href="#" onclick="start()">武侠仙侠</a></li>
            <li id="都市生活"><a href="#" onclick="start()">都式生活</a></li>
            <li id="历史军事"><a href="#" onclick="start()">历史军事</a></li>
            <li id="游戏竞技"><a href="#" onclick="start()">游戏竞技</a></li>
            <li id="科幻未来"><a href="#" onclick="start()">科幻未来</a></li>
            <li id="恐怖悬疑"><a href="#" onclick="start()">恐怖悬疑</a></li>
            <li id="二次元"><a href="#" onclick="start()">二次元</a></li>
            <li id="经典网文"><a href="#" onclick="start()">经典网文</a></li>
            <li id="古代言情"><a href="#" onclick="start()">古代言情</a></li>
            <li id="现代言情"><a href="#" onclick="start()">现代言情</a></li>
            <li id="幻想奇缘"><a href="#" onclick="start()">幻想奇缘</a></li>
            <li id="青春校园"><a href="#" onclick="start()">青春校园</a></li>
            <li id="网络情缘"><a href="#" onclick="start()">网络情缘</a></li>
            <li id="科幻空间"><a href="#" onclick="start()">科幻空间</a></li>
            <li id="鬼怪灵异"><a href="#" onclick="start()">鬼怪灵异</a></li>
            <li id="N次元"><a href="#" onclick="start()">N次元</a></li>
            <li id="言情美文"><a href="#" onclick="start()">言情美文</a></li>
        </ul>
    </div>
</div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="container">
            <h3><p class="text-center font-weight-bold">商品信息查询</p></h3>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">图片</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">价格</th>
                    <th scope="col">库存</th>
                    <th scope="col">简介</th>
                </tr>
                </thead>
                <tbody id="divId">
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>